<template>
  <div class="white-bg commonBoxmp">
    <div class="aic " style="margin: 10px">
 <el-button @click="handleAdd" type="primary">添加 没有事件</el-button>
    </div>
    <el-scrollbar class="HeightAuto">
      <div id="gantt"></div>
    </el-scrollbar>
  </div>

</template>

<script setup>
import { onMounted, ref } from "vue"
import FrappeAantt from "frappe-gantt";
 const gantt = ref(null)


var tasks = [
  {
	id: 'Task 1',
	name: '吃饭',
	start: '2023-11-28',
	end: '2023-11-31',
	progress: 70,
	
  },

   {
	id: 'Task 2',
	name: '开个会',
	start: '2023-12-28',
	end: '2023-12-31',
	progress: 20,
  dependencies: 'Task 1'
  },
]
function init(params) {
  console.log('FrappeAantt :>> ', FrappeAantt);
var gantt = new FrappeAantt("#gantt", tasks, {
   header_height: 50,
    column_width: 30,
    step: 24,
    view_modes: ['Quarter Day', 'Half Day', 'Day', 'Week', 'Month'],
    bar_height: 20,
    bar_corner_radius: 3,
    arrow_curve: 5,
    padding: 18,
    view_mode: 'Day',
    date_format: 'YYYY-MM-DD',
    language: 'zh', // or 'es', 'it', 'ru', 'ptBr', 'fr', 'tr', 'zh', 'de', 'hu'
    custom_popup_html: null, // function that returns HTML string to display in info box
	on_click: function (task) {
		console.log(task);
	},
	on_date_change: function(task, start, end) {
		console.log(task, start, end);
	},
	on_progress_change: function(task, progress) {
		console.log(task, progress);
	},
	on_view_change: function(mode) {
		console.log(mode);
	}
});
  gantt.change_view_mode('Week') // Quarter Day, Half Day, Day, Week, Month 
}

onMounted(()=>{
  init()
})
</script>


<style lang="scss" scoped>
#gantt{
  width: 100%;
  height: 500px;
}
</style>